<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			body{
				width: 100%;
				height: 1000000000px;
				background-image: url(img/图图.png);
				background-size: contain;
				/* 函数	cover	等比例放大图片	特点：原图按照比例放大存背景空间
							【开发者：背景图大小是否等于背景空间】
						contain	等比例缩放图片	特点：原图按照比例缩放存背景空间
							【开发者：背景图等比例显示在背景空间】
				 */
				/* 背景附件--尺寸中存在cover或者contain */
				background-attachment: fixed;	/* 背景图固定	scroll背景图不固定 */
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #fff182;
				background-image: url(img/图图.png);
				/* 问题：超大图-不显示	小图-显示
				 注意：背景空间大小，如果图小于背景空间---平铺
				 */
				background-repeat: repeat-y;
				/* no-repeat不平铺	repeat-x，y 横，纵向平铺 */
				background-size: 30%;
				/* 背景尺寸属性值：数值px % |函数 cover contain */
				/* 背景定位：前提 背景空间大于背景图 关键字：center、let、right、top...  */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sequi aliquid voluptates earum. Impedit, atque quis dolor nulla rem minus similique ea quibusdam, laboriosam sequi quasi culpa nam id magnam.
		Nobis, adipisci repellat ut aliquid expedita inventore quas? Quae, voluptatibus fugiat ad eos ullam inventore quisquam illo animi sapiente eius neque et tempore magnam. Adipisci tenetur eveniet ab dolores commodi.
		Nulla esse culpa, modi tenetur sequi quasi numquam et labore fugit facere illo animi. Vitae nulla omnis saepe quis in laborum reprehenderit alias totam! Quas vero id odit possimus qui.
		<!-- html img图片	引入一张图片，位置不可随意改变
			 css  背景图片	引入一张图片，位置可以随意改变 
				子属性 background-color	背景颜色
					  background-image	背景图
					  background-repeat 背景重复
					  background-size 背景尺寸
					  background-attachment 背景附件
					  background-position 背景定位
				复合属性 background:background-image background-color background-position
								   background-size background-repeat background-attachment
								   
				简写属性 background background-image background-position|background-size
				替代子属性 background-image、background-color、background-repect
			 -->
			 <div></div>
	</body>
</html>